<template>
    <div>
        <el-card shadow="never" class="mb-5">
            <div class="flex items-center">
                <el-text>标签名称</el-text>
                <div class="ml-3 w-52 mr-5"><el-input v-model="searchTagName" placeholder="请输入（模糊查询）" /></div>

                <el-text>创建日期</el-text>
                <div class="ml-3 w-30 mr-5">
                    <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" :shortcuts="shortcuts" size="default" @change="datepickerChange" />
                </div>

                <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
                <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
            </div>
        </el-card>

        <el-card shadow="never">
            <!-- 新建按钮 -->
            <div class="mb-5">
                <el-button type="primary" @click="addTagBtnClick">
                    <el-icon class="mr-1">
                        <Plus />
                    </el-icon>
                    新增</el-button>
            </div>
            <!-- 分页列表 -->
            <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
                <el-table-column prop="name" label="分类名称" width="180">
                    <template #default="scope">
                        <el-tag type="success">{{ scope.row.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="articlesTotal" label="文章数" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="deleteTagSubmit(scope.row)">
                            <el-icon class="mr-1">
                                <Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 分页 -->
        <div class="mt-10 flex justify-center">
            <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 50]"
                :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="getTableData" />
        </div>

        <FromDialog ref="formTagRef" title="添加文章标签" destroyOnClose @submit="onSubmit">
            <el-form ref="formRef" :model="form">
                <el-form-item prop="name">
                    <!-- 添加 tag 标签列表 -->
                    <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <span class="w-20">
                        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                            @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">
                            + 新增标签
                        </el-button>
                    </span>
                </el-form-item>
            </el-form>
        </FromDialog>

    </div>
</template>

<script setup>
import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue'
import { reactive, ref, nextTick } from 'vue'
import moment from 'moment'
import { getTagPageList, addTag, deleteTag } from '@/api/admin/tag'
import { showMessage, showModel } from '@/composables/util'
import FromDialog from '@/components/FormDialog.vue'

const searchTagName = ref('')
const pickDate = ref('')

const tableData = ref([])
const current = ref(1)
const total = ref(0)
const size = ref(10)

const startDate = reactive({})
const endDate = reactive({})

const tableLoading = ref(false)

// const dialogVisible = ref(false)
const formTagRef = ref(null)

const addTagBtnClick = () => {
    formTagRef.value.open()
}

const formRef = ref(null)

const form = reactive({
    tags: []
})

const onSubmit = () => {
    // 先验证 form 表单字段
    formRef.value.validate((valid) => {

        formTagRef.value.showBtnLaoding()

        form.tags = dynamicTags.value

        addTag(form).then((res) => {
            if (res.success == true) {
                showMessage('添加成功')
                // 重置 tags 数组
                form.tags = []
                // 重置 dynamicTags 数组
                dynamicTags.value = []
                formTagRef.value.close()
                getTableData()
            } else {
                let message = res.message
                showMessage(message, 'error')
            }   
        })
        .finally(formTagRef.value.closeBtnLaoding())
    })


}

const deleteTagSubmit = (row) => {
    showModel('是否确定要删除该标签？').then(() => {
        deleteTag(row.id).then((res) => {
            if (res.success == true) {
                showMessage('删除成功')
                getTableData()
            } else {
                let message = res.message
                showMessage(message, 'error')
            }
        })
    }).catch(() => {
        console.log('取消了')
    })
}

// 重置画面
const reset = () => {
    searchTagName.value = ''
    pickDate.value = ''
    startDate.value = null
    endDate.value = null
    getTableData()
}

// 选择时间
const handleSizeChange = (chooseSize) => {
    size.value = chooseSize
    getTableData()
}

const datepickerChange = (e) => {
    startDate.value = moment(e[0]).format('YYYY-MM-DD')
    endDate.value = moment(e[1]).format('YYYY-MM-DD')
}

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3500 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

// 获取分页信息
function getTableData() {
    tableLoading.value = true
    getTagPageList({ current: current.value, size: size.value, startDate: startDate.value, endDate: endDate.value, name: searchTagName.value })
        .then((res) => {
            if (res.success == true) {
                tableData.value = res.data
                current.value = res.current
                size.value = res.size
                total.value = res.total
            }
        })
        .finally(() => tableLoading.value = false)
}

getTableData()

// 标签输入值
const inputValue = ref('')
// 标签数组
const dynamicTags = ref([])
// 标签可视化
const inputVisible = ref(false)
// 输入标签内容
const InputRef = ref('')

const handleClose = (tag) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
</script>